﻿<!doctype html>
<!--[if IE 7 ]>    <html lang="en-gb" class="isie ie7 oldie no-js"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en-gb" class="isie ie8 oldie no-js"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en-gb" class="isie ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en-gb" class="no-js">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--[if lt IE 9]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <![endif]-->
    <title>优办公管理信息系统</title>
    {% load staticfiles %}
    <meta property="og:site_name" content="西安力啸网络科技有限公司" />
    <meta property="og:title" content="科技赋能未来" />
    <meta property="og:description" content=" 洞察 - 聚焦 - 创新" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="zh_SG" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="西安力啸网络科技有限公司" />
    <meta name="twitter:description" content="科技赋能未来" />
    <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <!--[if lte IE 8]>
            <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
        <![endif]-->
    
    <link rel="stylesheet" type="text/css" href="{% static 'online/css/style_login.css' %}" />
    <style>

        .header {
            /* position: fixed; */
            width: 100%;
            background: transparent;
            z-index: 50;
            border-radius: 0;
            box-shadow: 0px 0px 14px #ccc;
            /* top: 35px; */
            transition: all 0.3s linear;
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
        }

        .container {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
            width: 100%;
            max-width: 100%;
        }

        @media (min-width: 1200px) {
            .container {
                max-width: 1170px;
            }
        }
        @media (min-width: 992px) {
            .container {
                max-width: 970px;
            }
        }

        @media (min-width: 768px) {
            .container {
                max-width: 750px;
            }
        } 
        .container {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }
            .container:before, .container:after {
                display: table;
                content: " ";
            }

            .container:before, .container:after {
                display: table;
                content: " ";
            }
            .container:after {
                clear: both;
            }

            .container:before, .container:after {
                display: table;
                content: " ";
            }

            .container:after {
                clear: both;
            }

            .container:before, .container:after {
                display: table;
                content: " ";
            }


        .header .navbar {
            margin: 0;
            /* background: #0074DB; */
            /* background: rgba(22, 22, 22, 0.7); */
            background: #FBFBFB;
            opacity: 0.9;
            border: 0;
            padding: 0px 15px;
        }

        .navbar {
            position: relative;
            z-index: 1000;
            min-height: 50px;
            margin-bottom: 20px;
            border: 1px solid transparent;
        }

        .navbar-inverse {
            border-color: #080808;
        }

        @media (min-width: 768px) {
            .navbar {
                border-radius: 4px;
            }
        } 
        .navbar {
            position: relative;
            z-index: 1000;
            min-height: 50px;
            margin-bottom: 20px;
            border: 1px solid transparent;
        }

            .navbar:before, .navbar:after {
                display: table;
                content: " ";
            }

            .navbar:before, .navbar:after {
                display: table;
                content: " ";
            }

            .navbar:after {
                clear: both;
            }

            .navbar:before, .navbar:after {
                display: table;
                content: " ";
            }

            .navbar:after {
                clear: both;
            }

        @media (min-width: 768px) {
            .navbar-header {
                float: left;
                border-right: 1px solid #ccc;
            }
        }


        @media (min-width: 768px) {
            .navbar-header {
                width: 240px;
                -webkit-flex-shrink: 0;
                -ms-flex-negative: 0;
                flex-shrink: 0;
            }
        }


        @media (min-width: 768px) {
            .navbar-header {
                float: left;
                border-right: 1px solid #ccc;
            }
        }


        .navbar-header:before, .navbar-header:after {
            display: table;
            content: " ";
        }

        .navbar-header:before, .navbar-header:after {
            display: table;
            content: " ";
        }

        .navbar-header:after {
            clear: both;
        }

        .navbar-header:before, .navbar-header:after {
            display: table;
            content: " ";
        }

        .navbar-header:after {
            clear: both;
        }

        .navbar-header:before, .navbar-header:after {
            display: table;
            content: " ";
        }



        @media (min-width: 768px) {
            .navbar-collapse.collapse {
                display: block !important;
                height: auto !important;
                padding-bottom: 0;
                overflow: visible !important;
            }
        }

        .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
            border-color: #101010;
        }

        @media (min-width: 768px) {
            .navbar-collapse.collapse {
                display: block !important;
                height: auto !important;
                padding-bottom: 0;
                overflow: visible !important;
            }
        }

        @media (min-width: 768px) {
            .navbar-collapse {
                width: auto;
                border-top: 0;
                box-shadow: none;
                flex-basis: auto;
                -ms-flex-align: unset;
                align-items: unset;
            }
        }

        .navbar-collapse {
            max-height: 340px;
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
            -webkit-overflow-scrolling: touch;
        }

        @media (min-width: 768px) {
            .navbar-collapse {
                width: auto;
                border-top: 0;
                box-shadow: none;
            }
        }

        .navbar-collapse {
            max-height: 340px;
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
            -webkit-overflow-scrolling: touch;
        }

        .collapse {
            display: none;
        }

        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }

        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }

        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }

        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }

        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }

        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }


        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }

        .navbar-collapse:after {
            clear: both;
        }

        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }

        .navbar-collapse:after {
            clear: both;
        }

        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }

        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }

        .navbar-collapse:after {
            clear: both;
        }

        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }

        .navbar-collapse:after {
            clear: both;
        }

        .navbar-collapse:before, .navbar-collapse:after {
            display: table;
            content: " ";
        }
    </style>
</head>

<body style="background: url(/static/online/images/background.jpg) no-repeat;">

    <div class="login">

        <div class="login-top">
            <div style="text-align:center;"><img src="/static/online/images/logo_login.png" style="width:45%;" /></div>
            <div style="margin-top:10px;">
                <input type="text" value="" id="username" autofocus="autofocus" placeholder="请输入邮箱">
                <input type="password" value="" id="userpwd" autocomplete="new-password" placeholder="请输入密码">
            </div>

            <div class="forgot" id="error">

            </div>

            <div class="forgot">
                <!--<a href="#">忘记密码？</a>-->
                <!--<input type="checkbox" value="记住我">-->
                <div id="check_css3">
                    <span><input type="checkbox" class="input_check" id="check3"><label for="check3"></label></span><font style="position: absolute;margin-left: 6px;color: #757575;">记住我</font>
                </div>
            </div>
            <div class="forgot">
                <!--<a href="#">忘记密码？</a>-->
                <input type="button" onclick="loginbtn()" value="登录">
            </div>
        </div>

    </div>

    <footer class="footer">Copyright © 2018 西安力啸网络科技有限公司 版权所有 </footer>
</body>

<script src="{% static 'online/js/jquery-1.8.2.min.js' %}"></script>

<script>
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    function setCookie(c_name, value, expiredays) {
        var exdate = new Date()
        exdate.setDate(exdate.getDate() + expiredays)
        document.cookie = c_name + "=" + escape(value) +
            ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
    }
    $(document).ready(function () {
        var uname = getCookie('uname');
        if (uname && uname.length > 0) {
            $('#username').val(uname);
            $('#check3').attr("checked", "checked");
        }
    });
    function loginbtn() {
        var uname = $('#username');
        var upwd = $('#userpwd');

        if (uname.val().length < 1) {
            uname.attr('style', 'border:1px solid red;');
            uname.focus();
            return;
        }
        if (upwd.val().length < 1) {
            upwd.attr('style', 'border:1px solid red;');
            upwd.focus();
            return;
        }

        $.ajax({
            url: '/online/userlogin/',
            type: 'POST',
            dataType: 'json',
            headers: { "X-CSRFToken": getCookie('csrftoken') },
            data: {
                username: uname.val(),
                userpwd: upwd.val()
            },
            success: function (data) {
                if (data && data.success == '1') {
                    if ($('#check3').is(":checked")) {
                        setCookie('uname', uname.val(), 7);
                    } else {
                        setCookie('uname', '', -7);
                    }
                    $('#error').html('登陆成功，正在跳转...').attr('style', 'color:green;');
                    location.href = '/online/index';
                } else {
                    $('#error').html('登陆失败，用户名或密码错误。').attr('style', 'color:red;');
                }
            }
        })
    }
</script>

</html>
